import { Link } from '@brillout/docpress'
import { UiFrameworkExtension } from '../../components'

The `getPageContext()` function allows you to access the <Link href="/pageContext">`pageContext` object</Link> inside Vike hooks.

> It's only useful if you're building a <Link href="/extensions">Vike extension</Link> and you want to implement a <Link href="#universal-hooks">universal hook</Link>. If you aren't building a Vike extension, then you don't need to know about `getPageContext()`.

For example:

```ts
// /pages/some-page/+data.ts

export { data }
export type Data = Awaited<ReturnType<typeof data>>

import { getPageContext } from 'vike/getPageContext'

function data() {
  const pageContext = getPageContext()

  // ...
}
```

It's the same object than the `function data(pageContext)` argument and the following is equivalent:

```ts
// /pages/some-page/+data.ts

export { data }
export type Data = Awaited<ReturnType<typeof data>>

import { getPageContext } from 'vike/getPageContext'// [!code --]
import type { PageContextServer } from 'vike/types'

// @detype-uncomment function data() {// [!code --]
// @detype-uncomment  const pageContext = getPageContext()// [!code --]
function data(pageContext: PageContextServer) {// [!code ++]
  // ...
}
```

> You may ask yourself what the purpose of `getPageContext()` is and, indeed, it's useless for Vike users.
>
> It's useful when implementing a <Link href="/extensions">Vike extension</Link> that exports a <Link href="#universal-hooks">universal hook</Link>, see <Link href="#example" />.


## Universal Hooks

A *universal hook* (e.g. <Link href="/useConfig">`useConfig()`</Link>) is a component hook that also works inside Vike hooks.

```ts
 // /components/SomeReactComponent.tsx

import { useConfig } from 'vike-react/useConfig' // or vike-{vue,solid}

function SomeReactComponent() {
  // useConfig() can be used inside a component, and can ...
  const config = useConfig()
}
```
```ts
 // /pages/some-page/+data.ts

import { useConfig } from 'vike-react/useConfig'

export function data() {
  // ... also be used inside a Vike hook.
  const config = useConfig()
}
```

## Example

In order to make <Link href="/useConfig">`useConfig()`</Link> a universal hook (see <Link href="#universal-hooks" doNotInferSectionTitle />), the `useConfig()` implementation uses `getPageContext()`:

```js
// node_modules/vike-{react,vue,solid}/dist/hooks/useConfig.js

import { usePageContext } from './usePageContext'
import { getPageContext } from 'vike/getPageContext'

export function useConfig() {
  // useConfig() needs to access the pageContext object

  // If useConfig() is used inside a Vike hook
  let pageContext = getPageContext()

  // If useConfig() is used inside a React/Vue/Solid component
  if (!pageContext) {
    pageContext = usePageContext()
  }

  // ...
}
```


## See also

- <Link href="/pageContext" />
- <Link href="/getGlobalContext" />
